<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>劳力士官网滚动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .pic img {
            width: 100%;
            height: 1163px;
            object-fit: cover;
            object-position: bottom;
        }

        .watch {
            height: 3240px;
            background: linear-gradient(rgb(100, 123, 129), #07121a);
        }

        /* 一个小核心，canvas 要改为粘性定位，这样图片就会固定到当前位置 */
        .watch canvas {
            position: sticky;
            top: 0;
            object-fit: contain
        }

        .mark img {
            width: 100%;
        }

        body {
            overflow-x: hidden;
        }
    </style>
</head>

<body>
    <!-- 第一屏 -->
    <div class="pic">
        <img src="./img/w.avif" alt="">
    </div>
    <!-- 第二屏 -->
    <div class="watch">
        <canvas id="myCanvas"></canvas>
    </div>
    <!-- 第三屏幕 -->
    <div class="mark">
        <img src="./img/mark.avif" alt="">
    </div>

    <script>
        // 1. 创建canvas
        let myCanvas = document.querySelector("#myCanvas");
        myCanvas.width = window.innerWidth
        myCanvas.height = window.innerHeight;
        // 2. 画布上绘图
        let ctx = myCanvas.getContext("2d");
        // 3. 创建img对象
        let img = new Image();
        // 4. 设置图片名称  图片是 00 ~ 249 需要拼接字符串
        let index = 0;  // 第一张是 00
        // 5. 定义更换图片名称函数
        function completion(index) {
            if (index < 10) {
                return "00" + index
            } else if (index < 100) {
                return "0" + index
            }
            return index
        }
        // 6. 声明渲染函数
        let render = function () {
            // 5.1 起始地址
            let allPath = "./pic/52035-52037--000.webp"
            // 5.2 更换图片
            let realPath = allPath.replace('000', completion(index));
            img.src = realPath;
            img.onload = function (e) {
                // 5.3清除以前画布内容
                ctx.clearRect(0, 0, 1920, 1080);
                // 5.4 设置图片宽高和xy，大家可以自定义测试定义
                x = -600 + index * 5
                y = -450 + index * 2
                w = img.width * 1.8 - index * 4
                h = img.height * 1.8 - index * 4
                // 5.5 向画布上面绘制图片 drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
                ctx.drawImage(img, x, y, w, w);
            };
        };
        // 6. 渲染函数
        render();

        // 7. 开始设置滚动事件
        let box = document.querySelector('.watch') // 获得watch盒子
        let boxOffsetTop = box.offsetTop;  // watch盒子顶部的距离
        let boxHeight = box.offsetHeight;  // watch盒子的高度
        let boxBottom = boxOffsetTop + boxHeight - window.innerHeight;  // watch盒子在页面中底部的位置
        window.addEventListener("scroll", function () {
            // 得到当前的滚动距离
            let currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
            // 计算页面是否滚动底部的位置，用于判断是否结束
            let windowBottom = currentScrollTop

            if (windowBottom >= boxOffsetTop && currentScrollTop <= boxBottom) {
                // console.log("盒子在可视范围内");
                // 在盒子可视范围内执行你的操作
                // 滚动的距离:  当前的页面滚动距离 - 盒子的位置  =  滚动的距离
                // 除以10的原因是把滚动距离约束到 0~249 之间
                index = Math.ceil((currentScrollTop - boxOffsetTop) / 10)

                // 开启动画 比定时器更好用
                requestAnimationFrame(render)
            }

        });

    </script>
</body>

</html>
